<template>
  <div class="modal-column">
    <div class="modal-column-full-body">
      <vxe-toolbar class="toolbar-left">
        <template #tools>
          <Select v-model="params.state" class="w-120px" :datas="{已保存:'未审核',已审核:'已审核'}" placeholder="审核状态："/>
          <div class="h-input-group">
            <span class="h-input-addon ml-8px">订单日期：</span>
            <DateRangePicker v-model="dateRange"></DateRangePicker>
          </div>
          <div class="h-input-group">
            <span class="h-input-addon ml-8px">客户：</span>
            <Select class="w-180px" filterable :datas="customerList" keyName="id" titleName="name"
                    v-model="params.customerId" placeholder="请选择客户"  readonly disabled/>
          </div>
          <Search v-model.trim="params.filter" search-button-theme="h-btn-default"
                  show-search-button class="w-200px ml-8px"
                  placeholder="请输入订单号" @search="doSearch">
            <i class="h-icon-search"/>
          </Search>
        </template>
      </vxe-toolbar>
      <div class="flex1">
        <vxe-table row-id="id"
                   ref="table"
                   :data="dataList"
                   highlight-hover-row
                   show-overflow
                   show-footer
                   :footer-method="footerMethod"
                   :row-config="{height: 48}"
                   :column-config="{resizable: true}"
                   :sort-config="{remote:true}"
                   :loading="loading">
          <vxe-column type="checkbox" width="40" align="center"/>
          <vxe-column title="单据日期" field="outboundDate" align="center" width="130"/>
          <vxe-column title="单据编号" field="orderNo" width="200"/>
          <vxe-column title="客户" field="customerName" min-width="120"/>
          <vxe-column title="销售金额" field="totalAmount" width="120"/>
          <vxe-column title="折扣金额" field="discountAmount" width="120"/>
          <vxe-column title="折后金额" field="finalAmount" width="120"/>
        </vxe-table>
      </div>
      <div class="flex justify-between items-center pt-5px">
        <vxe-pager perfect @page-change="loadList(false)"
                   v-model:current-page="pagination.page"
                   v-model:page-size="pagination.pageSize"
                   :total="pagination.total"
                   :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'Total']">
          <template #left>
            <span class="mr-12px text-16px">总金额：{{ amountTotal }}元</span>
            <vxe-button @click="loadList(false)" type="text" size="mini" icon="h-icon-refresh"
                        :loading="loading"></vxe-button>
          </template>
        </vxe-pager>
      </div>
    </div>
    <div class="modal-column-between">
      <Button @click="$emit('close')" :loading="loading">
        取消
      </Button>
      <Button color="primary" @click="batchSelect" :loading="loading">
        保存
      </Button>
    </div>
  </div>
</template>
<script>
import manba from "manba";
import SalesOrder from "@js/api/sales/SalesOrder";
import {confirm, loading, message} from "heyui.ext";
import Customer from "@js/api/basic/Customer";
import SalesOutbound from "@js/api/sales/SalesOutbound";

const startTime = manba().startOf(manba.MONTH).format("YYYY-MM-dd");
const endTime = manba().endOf(manba.DAY).format("YYYY-MM-dd");

export default {
  name: "SalesOutboundSelect",
  props: {
    customerId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      dataList: [],
      loading: false,
      amountTotal: 0,
      totalParams: {},
      pagination: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      params: {
        filter: null,
        state: '已审核',
        sortCol: null,
        sort: null,
        customerId:null
      },
      customerList: [],
      dateRange: {
        start: manba(startTime).format("YYYY-MM-dd"),
        end: manba(endTime).format("YYYY-MM-dd")
      },
    }
  },
  computed: {
    queryParams() {
      return Object.assign(this.params, {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
        start: this.dateRange.start,
        end: this.dateRange.end,
        //查询未退货订单
        queryUnReturnOrder: 1
      })
    },
  },
  methods: {

    batchSelect(){
      const selectedRows = this.$refs.table.getCheckboxRecords();
      console.log(selectedRows);
      if (selectedRows.length === 0) {
        message.error("请选择至少一条订单");
        return;
      }
      // 创建一个数组存储所有订单明细
      let allItemList = [];
      let selectSalesOutboundIdList = [];
      console.log("selectedRows",selectedRows)
      // 遍历选中的订单，收集所有明细
      selectedRows.forEach(row => {
        if (row.salesOutboundItemList && row.salesOutboundItemList.length > 0) {
          // 将当前订单的明细添加到总列表中
          allItemList = allItemList.concat(row.salesOutboundItemList);
          selectSalesOutboundIdList = selectSalesOutboundIdList.concat(row.id);
        }
      });

      let params = {
        selectSalesOutboundIdList:selectSalesOutboundIdList,
        itemList: allItemList
      };
      // 这里可以触发成功事件并传递数据
      this.$emit('success', params);
    },

    footerMethod({columns, data}) {
      let totalAmount = 0;
      let discountAmount = 0;
      let finalAmount = 0;
      columns.forEach((column) => {
        if (column.property && ['totalAmount','discountAmount','finalAmount'].includes(column.property)) {

          data.forEach((row) => {
            let rd = row[column.property];
            if (column.property === 'totalAmount') {
              if (rd) {
                totalAmount += Number(rd || 0);
              }
            } else if (column.property === 'discountAmount') {
              if (rd) {
                discountAmount += Number(rd || 0);
              }
            }
            else if (column.property === 'finalAmount') {
              if (rd) {
                finalAmount += Number(rd || 0);
              }
            }
          });
        }
      })
      this.amountTotal = totalAmount.toFixed(2);
      return [["", "", "", "",totalAmount.toFixed(2),discountAmount.toFixed(2),finalAmount.toFixed(2)]];
    },
    doSearch() {
      this.pagination.page = 1;
      this.loadList();
    },
    loadList(type = true) {
      this.loading = true;
      SalesOutbound.list(this.queryParams).then(({data: {results, total}}) => {
        this.dataList = results || [];
        this.pagination.total = total;
      }).finally(() => this.loading = false);

      Promise.all([
        Customer.select(),
      ]).then((results) => {
        this.customerList = results[0].data || [];
      }).finally(() => loading.close());
    },
  },
  created() {
    // 使用传入的参数初始化查询条件
    if (this.customerId) {
      this.params.customerId = this.customerId;
    }
    this.loadList();
  }
}
</script>

<style scoped>
/* 覆盖 vxe-toolbar 的默认样式 */
.toolbar-left :deep(.vxe-toolbar) {
  padding: 8px 10px;
  justify-content: flex-start !important;
}

.toolbar-left :deep(.vxe-tools--wrapper) {
  justify-content: flex-start !important;
  width: 100%;
}

/* 移除不必要的 margin-left */
.h-input-group {
  margin-left: 8px;
}

.h-input-group:first-child {
  margin-left: 0;
}
</style>
